<script setup>
import { computed, watch, ref, onMounted } from 'vue';
import { useMessage } from 'naive-ui';
import { useModalStore, useDataStore } from '@/store';
import { inject } from 'vue';

const message = useMessage();
const modalStore = useModalStore();
const dataStore = useDataStore();

const selectedAreaIndexes = ref([]);

// 通过 provide/inject 获取 coordinateCanvas 实例
const coordinateCanvasRef = inject('coordinateCanvasRef');

// 监听区域标签列表变化，自动初始化选中状态
watch(() => dataStore.areaLabelList, (newVal) => {
	if (newVal && newVal.length > 0) {
		// 默认全选
		selectedAreaIndexes.value = newVal.map((item, index) => index);
	} else {
		selectedAreaIndexes.value = [];
	}
}, { immediate: true });

// 监听选中状态变化，实时更新图表
watch(selectedAreaIndexes, (newVal) => {
	// 避免在初始化时触发更新
	if (newVal.length === 0 && dataStore.areaLabelList.length === 0) {
		return;
	}

	const filterRoomList = dataStore.filterRooms(newVal);

	// 直接调用 canvas 方法
	if (coordinateCanvasRef?.value) {
		coordinateCanvasRef.value.updateEchartsData(filterRoomList);
	}
}, { deep: true });

const handleConfirm = () => {
	message.success(`已显示 ${selectedAreaIndexes.value.length} 个区域`);
	modalStore.closeAreaModal();
};

const handleReset = () => {
	// 重置选中状态为全选
	selectedAreaIndexes.value = dataStore.areaLabelList.map((item, index) => index);

	message.success('已重置为显示所有区域');
};

const isSelectedAll = computed(() => {
	return selectedAreaIndexes.value.length === dataStore.areaLabelList.length && dataStore.areaLabelList.length > 0;
});

const selectedCount = computed(() => {
	return selectedAreaIndexes.value.length;
});

const handleSelectAllChange = (value) => {
	if (value) {
		selectedAreaIndexes.value = dataStore.areaLabelList.map((item, index) => index);
	} else {
		selectedAreaIndexes.value = [];
	}
}

// 组件挂载时初始化
onMounted(() => {
	if (dataStore.areaLabelList.length > 0) {
		selectedAreaIndexes.value = dataStore.areaLabelList.map((item, index) => index);
	}
});
</script>

<template>
	<n-modal v-model:show="modalStore.showAreaModal" block-scroll close-on-esc draggable title="区域过滤"  preset="dialog" display-directive="if">
		<div class="popup-modal-content" v-if="dataStore.areaLabelList.length > 0">
			<div class="select-all-section">
				<div class="select-all-row">
					<n-checkbox
						label="全选"
						:on-update:checked="handleSelectAllChange"
						:checked="isSelectedAll"
					/>
					<span class="selected-count">已选择 {{ selectedCount }}/{{ dataStore.areaLabelList.length }} 个区域</span>
				</div>
			</div>
			<div class="checkbox-list">
				<n-checkbox-group v-model:value="selectedAreaIndexes">
					<n-checkbox
						v-for="(item, index) in dataStore.areaLabelList"
						:key="index"
						:value="index"
						:label="item.name"
					/>
				</n-checkbox-group>
			</div>
		</div>
		<div class="popup-modal-content" v-else>
			<div class="no-data">
				暂无区域数据，请先导入数据
			</div>
		</div>

		<div class="dialog-footer">
			<n-button @click="handleReset" size="small">重置</n-button>
			<n-button type="primary" @click="handleConfirm" size="small">关闭</n-button>
		</div>

	</n-modal>

</template>

<style lang="scss" scoped>
.popup-modal-content {
	background-color: #fff;
	padding: 16px;
}

.select-all-section {
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #f0f0f0;
}

.select-all-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.selected-count {
	font-size: 12px;
	color: #666;
}

.checkbox-list {
	max-height: 300px;
	overflow-y: auto;

	:deep(.n-checkbox-group) {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
}

.no-data {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	color: #999;
	font-size: 14px;
}

.dialog-footer {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 16px;
}
</style>